<template>
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <!-- 登录按钮 -->
    <button class="btn-login" type="primary" @click="getUserProfile">一键登录</button>
    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>

<script>
  import { mapMutations } from 'vuex'
  
  export default {
    name:"my-login",
    data() {
      return {
        
      };
    },
    methods: {
      // store 方法
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
      // 获取微信用户信息
      async getUserProfile(){
        // 获取用户信息
        const [err, res] = await uni.getUserProfile({desc:'获取用户信息'})
        console.log('微信获取用户信息\n', 'err=>', err, '\nres=>', res)
        // 判断用户是否拒绝授权
        if(err !== null && err.errMsg === 'getUserProfile:fail auth deny') return uni.$showMsg('您取消了授权！')
        
        // 用户同意授权，保存用户信息到本地
        this.updateUserInfo(res.userInfo)
        
        // 获取登录（黑马优购）成功后的Token
        this.getToken(res)
      },
      // 获取登录（黑马优购）成功后的Token
      async getToken(info){
        // 微信登录，换取黑马优购登录需要的code
        const [err, res] = await uni.login().catch(err => err)
        
        // 判断微信登录
        if(err || res.errMsg !== 'login:ok') return uni.$showMsg('微信登录失败！')
        console.log('微信登录\n', 'err=>', err, '\nres=>', res)
        
        // 准备黑马优购登录需要的参数
        const body = {
          code: res.code, // 微信登录成功后返回
          encryptedData: info.encryptedData, 
          rawData: info.rawData, 
          iv: info.iv, 
          signature: info.signature, 
        }
        // 登录黑马优购换取token
        const { data: loginResult } = await uni.$http.post('/users/wxlogin', body)
        console.log('黑马优购登录\n', loginResult)
        
        // 判断黑马优购登录
        if(loginResult.meta.status !== 200) return uni.$showMsg('黑马优购登录失败！')
        
        // 黑马优购登录成功
        uni.$showMsg('黑马优购登录成功！')
        // 保存token
        this.updateToken(loginResult.message.token)
        
      },
      
    }
  }
</script>

<style lang="scss">

  // 登录容器
  .login-container{
      // 登录盒子的样式
      height: 750rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #f8f8f8;
      position: relative;
      overflow: hidden;
      
      // 绘制登录盒子底部的半椭圆造型
      &::after {
        content: ' ';
        display: block;
        position: absolute;
        width: 100%;
        height: 40px;
        left: 0;
        bottom: 0;
        background-color: white;
        border-radius: 100%;
        transform: translateY(50%);
      }
    // 登录按钮
    .btn-login{
      width: 90%;
      border-radius: 100px;
      margin: 15px 0;
      background-color: #c00000;
    }
    
    // 登录提示文字
    .tips-text{
      font-size: 12px;
      color: gray;
    }
  }



</style>
